<template>
	<view class="collect-container">
		<!-- 头部标题 -->
		<view class="collect-header">
			<view class="header-content">
				<uni-icons type="star-filled" size="28" color="#fff"></uni-icons>
				<text class="header-title">我的收藏</text>
			</view>
			<text class="header-subtitle">珍藏您的心仪之物</text>
		</view>

		<!-- 收藏列表 -->
		<view class="collect-list" v-if="collectList.length > 0">
			<view class="collect-item" v-for="(item, index) in collectList" :key="index">
				<image class="product-image" :src="'http://localhost:3000/'+item.product_picture" mode="aspectFill">
				</image>
				<view class="product-info">
					<text class="product-name">{{item.product_name}}</text>
					<text class="product-price">¥{{item.product_price}}</text>
				</view>
				<view class="product-actions">
					<button class="buy-btn" @click="goToDetail(item.product_id)">立即购买</button>
					<button class="delete-btn" @click="removeCollect(item.product_id, index)">
						<uni-icons type="trash" size="18" color="#999"></uni-icons>
					</button>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-collect" v-else>
			<view class="empty-content">
				<uni-icons type="star" size="80" color="#FF6EA1"></uni-icons>
				<text class="empty-text">您的收藏还是空的！</text>
				<text class="empty-tip">发现更多精彩，开始您的收藏之旅</text>
				<button class="browse-btn" @click="goShopping">
					<uni-icons type="shop" size="16" color="#fff"></uni-icons>
					去逛逛
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList: [] // 收藏列表
			};
		},
		onLoad() {
			this.getCollectList();
		},
		methods: {
			// 获取收藏列表
			getCollectList() {
				uni.showLoading({
					title: '加载中...'
				});
				// 这里替换为你的实际API调用
				uni.request({
					url: 'http://localhost:8081/api/user/collect/getCollect',
					method: 'POST',
					data: {
						user_id: uni.getStorageSync('user').user_id
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === "001") {
							this.collectList = res.data.collectList;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							// 模拟数据
							this.mockData();
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						// 模拟数据
						this.mockData();
					}
				});
			},

			// 模拟数据
			mockData() {
				this.collectList = [];
			},

			// 移除收藏
			removeCollect(productId, index) {
				uni.showModal({
					title: '提示',
					content: '确定要移除这个收藏吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});
							// 这里替换为你的实际API调用
							uni.request({
								url: 'http://localhost:8081/api/user/collect/deleteCollect',
								method: 'POST',
								data: {
									user_id: uni.getStorageSync('user').user_id,
									product_id: productId
								},
								success: (res) => {
									uni.hideLoading();
									if (res.data.code === '001') {
										uni.showToast({
											title: '已移除收藏'
										});
										this.collectList.splice(index, 1);
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										});
									}
								},
								fail: (err) => {
									uni.hideLoading();
									uni.showToast({
										title: '请求失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},

			// 查看商品详情
			goToDetail(productId) {
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + productId
				});
			},

			// 去购物
			goShopping() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.collect-container {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 头部样式 */
	.collect-header {
		background: linear-gradient(135deg, #FF6EA1 0%, #FF8E9E 100%);
		padding: 60rpx 30rpx 40rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 110, 161, 0.2);

		.header-content {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 15rpx;

			.header-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				margin-left: 15rpx;
			}
		}

		.header-subtitle {
			display: block;
			text-align: center;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.9);
			letter-spacing: 1rpx;
		}
	}

	/* 收藏列表 */
	.collect-list {
		padding: 0 20rpx;

		.collect-item {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.product-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.product-info {
				flex: 1;

				.product-name {
					font-size: 28rpx;
					color: #333;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 15rpx;
				}

				.product-price {
					font-size: 30rpx;
					color: #FF6EA1;
					font-weight: bold;
				}
			}

			.product-actions {
				display: flex;
				flex-direction: column;
				align-items: center;

				.buy-btn {
					background-color: #FF6EA1;
					color: #fff;
					border-radius: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 30rpx;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.delete-btn {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #f5f5f5;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	/* 空状态 */
	.empty-collect {
		padding-top: 100rpx;

		.empty-content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-text {
				font-size: 32rpx;
				color: #333;
				margin: 30rpx 0 15rpx;
				font-weight: bold;
			}

			.empty-tip {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 40rpx;
			}

			.browse-btn {
				background: linear-gradient(to right, #FF6EA1, #FF8E9E);
				color: white;
				border: none;
				padding: 0 60rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				box-shadow: 0 8rpx 20rpx rgba(255, 110, 161, 0.3);
				display: flex;
				align-items: center;

				.uni-icons {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>